<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Timeline from '@sscd/timeline';
  const reverse = ref<boolean>(false);
  const handleClick = () => {
    reverse.value = !reverse.value;
  };
</script>

<template>
  <div class="demo">
    <div class="demo-title">最后一个及排序</div>
    <div class="demo-content">
      <Timeline pending="Recording..." :reverse="reverse">
        <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
        <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
        <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
      </Timeline>
      <Button type="primary" style="margin-top: 16px" @click="handleClick">Toggle Reverse</Button>
    </div>
  </div>
</template>
